<template functional>
  <a-sub-menu :key="props.currentRoute.path">
    <template slot="title">
      <svg-icon :icon="props.currentRoute.meta.icon" v-if="props.currentRoute.meta.icon"> </svg-icon>
      <span style="margin-left:16px" class="menu-title">{{ props.currentRoute.meta.title }}</span>
    </template>
    <template v-for="(item, index) in props.currentRoute.children">
      <menu-item 
        v-if="!item.children && !item.hidden" 
        :key="props.currentRoute.path + '/' + item.path + '-item'" 
        :currentRoute="{
          ...item,
          path: item.path.startsWith('/') ? item.path : `${props.currentRoute.path}/${item.path}`
        }" 
      />
      <sub-menu 
        v-else-if="!item.hidden"
        :key="props.currentRoute.path + '/' + item.path + '-sub'" 
        :currentRoute="{
          ...item,
          path: item.path.startsWith('/') ? item.path : `${props.currentRoute.path}/${item.path}`
        }" 
      />
    </template>
  </a-sub-menu>
</template>

<script>
import menuItem from './menuItem';
export default {
  name: 'subMenu',
  components: { menuItem },
  props: {
    currentRoute: {
      type: Object,
      required: true
    }
  }
};
</script>
